<template>
  <div class="wrap">
    <div class="page-head">
      <a-breadcrumb>
        <a-breadcrumb-item>{{$t('deviceLog.deviceLog.60zedpkb08k0')}}</a-breadcrumb-item>
        <a-breadcrumb-item>{{$t('deviceLog.deviceLog.60zedpkb28k0')}}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <c-table-search v-model:model="form.data" @refresh="getData">
      <a-col :span="8">
        <a-form-item field="value1" :label="$t('deviceLog.deviceLog.60zedpkb2ls0')">
          <a-input v-model="form.data.value2" :placeholder="$t('deviceLog.deviceLog.60zedpkb2t00')" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="value2" :label="$t('deviceLog.deviceLog.60zedpkb2ys0')">
          <a-input v-model="form.data.value3" :placeholder="$t('deviceLog.deviceLog.60zedpkb34g0')" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="value3" :label="$t('deviceLog.deviceLog.60zedpkb3980')">
          <a-input v-model="form.data.value4" :placeholder="$t('deviceLog.deviceLog.60zedpkb3e40')" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item field="value4" :label="$t('deviceLog.deviceLog.60zedpkb3jk0')">
          <a-range-picker style="width: 360px; margin: 0 24px 24px 0;" show-time
            :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }" format="YYYY-MM-DD HH:mm" />
        </a-form-item>
      </a-col>
      <template v-slot:refresh>
        <a-button type="outline" @click="refresh">
          <template #icon>
            <icon-loop />
          </template>
        </a-button>
      </template>
    </c-table-search>
    <div class="table-scroll">
      <c-table v-model:data="list">
        <a-table-column :title="$t('deviceLog.deviceLog.60zedpkb3oc0')" data-index="key" ellipsis tooltip :width="70"></a-table-column>
        <a-table-column :title="$t('deviceLog.deviceLog.60zedpkb3sg0')" data-index="logType" ellipsis tooltip :width="80"></a-table-column>
        <a-table-column :title="$t('deviceLog.deviceLog.60zedpkb2ls0')" data-index="name" ellipsis tooltip :width="80"></a-table-column>
        <a-table-column :title="$t('deviceLog.deviceLog.60zedpkb2ys0')" data-index="deviceType" ellipsis tooltip :width="80"></a-table-column>
        <a-table-column :title="$t('deviceLog.deviceLog.60zedpkb3980')" data-index="deviceKey" ellipsis tooltip :width="80"></a-table-column>
        <a-table-column :title="$t('deviceLog.deviceLog.60zedpkb3xo0')" data-index="parameter" ellipsis tooltip :width="240"></a-table-column>
        <a-table-column :title="$t('deviceLog.deviceLog.60zedpkb4280')" data-index="createTime" ellipsis tooltip :width="120"></a-table-column>
      </c-table>
    </div>
  </div>
</template>

<script lang='ts' setup>
const emit = defineEmits(['refresh'])
const refresh = () => {
  emit('refresh')
}
// const switchColor = ref(false);
const form = reactive({
  data: {
    value1: '',
    value2: '',
    value3: '',
    value4: '',
    value5: '',
  }
})
const list = [{
  key: 1,
  logType: t('deviceLog.deviceLog.60zedpkb46s0'),
  name: t('deviceLog.deviceLog.60zedpkb4bs0'),
  deviceType: t('deviceLog.deviceLog.60zedpkb4p00'),
  deviceKey: 'AOA-12',
  parameter: '',
  createTime: '2024-06-19 16:43:47'
}, {
  key: 2,
  logType: t('deviceLog.deviceLog.60zedpkb46s0'),
  name: t('deviceLog.deviceLog.60zedpkb4bs0'),
  deviceType: t('deviceLog.deviceLog.60zedpkb4p00'),
  deviceKey: 'AOA-12',
  parameter: '',
  createTime: '2024-06-19 16:43:47'
}, {
  key: 3,
  logType: t('deviceLog.deviceLog.60zedpkb46s0'),
  name: t('deviceLog.deviceLog.60zedpkb4bs0'),
  deviceType: t('deviceLog.deviceLog.60zedpkb4p00'),
  deviceKey: 'AOA-12',
  parameter: '',
  createTime: '2024-06-19 16:43:47'
}, {
  key: 4,
  logType: t('deviceLog.deviceLog.60zedpkb46s0'),
  name: t('deviceLog.deviceLog.60zedpkb4bs0'),
  deviceType: t('deviceLog.deviceLog.60zedpkb4p00'),
  deviceKey: 'AOA-12',
  parameter: '',
  createTime: '2024-06-19 16:43:47'
}, {
  key: 5,
  logType: t('deviceLog.deviceLog.60zedpkb46s0'),
  name: t('deviceLog.deviceLog.60zedpkb4bs0'),
  deviceType: t('deviceLog.deviceLog.60zedpkb4p00'),
  deviceKey: 'AOA-12',
  parameter: '',
  createTime: '2024-06-19 16:43:47'
}];
const getData = () => {
  // console.log('111')
}
// 选择时间
// const onSelect = (dateString: any, date: any) => {
//   console.log('onSelect', dateString, date)
// }
// const onChange = (dateString: any, date: any) => {
//   console.log('onChange: ', dateString, date)
// }
// const onOk = (dateString: any, date: any) => {
//   console.log('onOk: ', dateString, date)
// }
</script>

<style scoped lang="less">
</style>